const xhr = new XMLHttpRequest();
var textAreaText = document.querySelector("textarea");
var button1 = document.querySelector("#button1");
var button2 = document.querySelector("#button2");
var button3 = document.querySelector("#button3");
var showbox = document.querySelector(".showbox")
var dir = document.querySelector("#directory")
var html = document.querySelector("html")
var dirpic = document.querySelector("#dirpic")
var cover_layer = document.querySelector(".cover_layer")
var intervalID;
var timeoutID;
var netsite="http://39.103.159.52:6607";
// window.addEventListener('resize',function(){

//     console.log(html.style.fontSize);

// })
localStorage.removeItem("dirobj");
textAreaText.addEventListener("blur", function () {
    showbox.innerHTML = marked.parse(textAreaText.value);
})
// 保存
button1.addEventListener("click", function () {
    gen_savefuc();
    cover_layer.style.display = "block";
    save_button.style.display = "block";
})

button3.addEventListener("click", function () {
    gen_savefuc();
    cover_layer.style.display = "block";
    delete_button.style.display = "block";
})

// 获取目录
button2.addEventListener("click", function () {
    let data = get_dir();
    generateDir(dir, 10, data);
    var dia = document.querySelectorAll(".headText");
    console.log(dia.length);
    for (let i = 0; i < dia.length; i++) {
        dia[i].addEventListener("mouseover", function () {
            dia[i].style.backgroundColor = "tomato";
        })
        dia[i].addEventListener("mouseout", function () {
            dia[i].style.backgroundColor = "";
        })
    }
}
)

function get_dir() {
    let data = {}
    xhr.open('POST', netsite+'/getDir');
    xhr.send();
    xhr.onreadystatechange = function () {
        console.log(xhr.readyState);
        if (xhr.readyState === 4) {
            if (xhr.status >= 200 && xhr.status < 300) {
                console.log(xhr.response);
                data = JSON.parse(xhr.response);
                console.log(data);
                localStorage.setItem("dirobj", JSON.stringify(data));
            }
        }
    }
    return data;
}

// 目录生成，功能折叠和提取文件功能添加
function gen(dirct, data, floor) {
    if (Object.values(data).length) {
        // floor=floor+5;
        // console.log(Object.values(data).length);
        for (let p in data) {
            // 创建子盒子
            var div = document.createElement("div");
            div.name = p;
            div.id = p;
            div.class = "item";
            div.style.paddingLeft = floor + "px";
            div.style.position = "relative";
            dirct.appendChild(div);
            // 子盒子的图标
            var signal = document.createElement("div");
            signal.style.position = "absolute";
            signal.innerHTML = "";
            signal.style.fontFamily = 'icomoon';
            signal.style.top = ".2143rem";
            signal.style.left = "-1.4286rem";
            signal.style.color = "rgb(60, 60, 60)";
            signal.style.fontSize = "1.1429rem";
            signal.style.cursor = "pointer";
            signal.style.userSelect = "none";
            signal.class = "signal";
            dirct.lastElementChild.appendChild(signal);
            // 子盒子的标题
            var dia = document.createElement("div");
            dia.innerHTML = p;
            dia.style.cursor = "pointer";
            dia.classList.add("headText");
            dirct.lastElementChild.appendChild(dia);

            if (typeof (data[p]) != "string") {
                dirct = dirct.lastElementChild;
                dirct.class = "file";
                dirct.firstElementChild.innerHTML = "";
                // 折叠文件夹事件
                let butn = dirct.firstElementChild.nextElementSibling;
                butn.addEventListener("click", function () {
                    var nxtdirct = butn.nextElementSibling;
                    if (nxtdirct) {
                        if (nxtdirct.style.display != "none") {
                            while (nxtdirct) {
                                nxtdirct.style.display = "none"
                                nxtdirct = nxtdirct.nextElementSibling;
                                console.log(nxtdirct);
                            }
                        } else {
                            while (nxtdirct) {
                                nxtdirct.style.display = "block"
                                nxtdirct = nxtdirct.nextElementSibling;
                                console.log(nxtdirct);
                            }
                        }
                    } else {
                        console.log("err")
                    }
                });
                gen(dirct, data[p], floor);
                dirct = dirct.parentNode;
            } else {
                // 加打开文件事件
                // console.log(dirct.lastElementChild);
                getText(dirct.lastElementChild, textAreaText);
            }
        }
    }
}
// 文件夹折叠

// 文件内容打印功能
function getText(obj, textAreaText) {
    // console.log(obj);

    obj.addEventListener("dblclick", function () {
        xhr.open('GET',  netsite+'/getText?filename='+obj.id);
        xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
        xhr.send();
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4) {
                if (xhr.status >= 200 && xhr.status < 300) {
                    let data;
                    data = xhr.response;
                    textAreaText.value = data;
                    showbox.innerHTML = marked.parse(textAreaText.value);
                }
            }
        }
    })
}

// 目录生成功能封装
function generateDir(diro, floor, data) {
    
    // console.log(Object.values(data).length);
    if (data) {
        diro.innerHTML = "";
        gen(diro, data, floor);
        let dia = document.querySelectorAll(".headText");
        for (let i = 0; i < dia.length; i++) {
            dia[i].addEventListener("mouseover", function () {
                dia[i].style.backgroundColor = "tomato";
            })
            dia[i].addEventListener("mouseout", function () {
                dia[i].style.backgroundColor = "";
            })
        }
    }
}
// get_dir();

var save_button = document.querySelector("#save_button")
var delete_button = document.querySelector("#delete_button")
var save_path = document.querySelector("#save_path");
var save_name = document.querySelector("#save_name");
var closs = document.querySelector("#closs")
var dir_menu = document.querySelector("#dir_menu");
var dir_head = document.querySelector("#dir_head");
var dir_flash = document.querySelector("#dir_flash");
var flexbox = document.querySelector("#flexbox")
function gen2(dirct, data, floor) {
    if (Object.values(data).length) {
        // floor=floor+5;
        // console.log(Object.values(data).length);
        for (let p in data) {
            // 创建子盒子
            var div = document.createElement("div");
            div.name = p;
            div.id = p;
            div.class = "item";
            div.style.paddingLeft = floor + "px";
            div.style.position = "relative";
            dirct.appendChild(div);
            // 子盒子的图标
            var signal = document.createElement("div");
            signal.style.position = "absolute";
            signal.innerHTML = "";
            signal.style.fontFamily = 'icomoon';
            signal.style.top = ".2143rem";
            signal.style.left = "-1.4286rem";
            signal.style.color = "rgb(60, 60, 60)";
            signal.style.fontSize = "1.1429rem";
            signal.style.cursor = "pointer";
            signal.style.userSelect = "none";
            signal.class = "signal";
            dirct.lastElementChild.appendChild(signal);
            // 子盒子的标题
            var dia = document.createElement("div");
            dia.innerHTML = p;
            dia.style.cursor = "pointer";
            dia.classList.add("headText2");
            dirct.lastElementChild.appendChild(dia);

            if (typeof (data[p]) != "string") {
                dirct = dirct.lastElementChild;
                dirct.classList.add("filebag");
                dirct.firstElementChild.innerHTML = "";
                // 折叠文件夹事件
                let butn = dirct.firstElementChild.nextElementSibling;
                butn.addEventListener("click", function () {
                    var nxtdirct = butn.nextElementSibling;
                    if (nxtdirct) {
                        if (nxtdirct.style.display != "none") {
                            while (nxtdirct) {
                                nxtdirct.style.display = "none"
                                nxtdirct = nxtdirct.nextElementSibling;
                                console.log(nxtdirct);
                            }
                        } else {
                            while (nxtdirct) {
                                nxtdirct.style.display = "block"
                                nxtdirct = nxtdirct.nextElementSibling;
                                console.log(nxtdirct);
                            }
                        }
                    } else {
                        console.log("err")
                    }
                });
                gen2(dirct, data[p], floor);
                dirct = dirct.parentNode;
            } else {
                // 加打开文件事件
                // console.log(dirct.lastElementChild);
                // getText(dirct.lastElementChild, textAreaText);
            }
        }
    }
}
function generateDir2(diro, floor) {
    let data = JSON.parse(localStorage.getItem("dirobj"));
    diro.innerHTML = "";
    gen2(diro, data, floor);

}
// 生成封装存储功能
function gen_savefuc() {
    generateDir2(dirpic, 10);
    dirpic.style.marginLeft = "20px"
    for (let i = 0; i < dirpic.children.length; i++) {
        dirpic.children[i].style.paddingLeft = "10px";
    }
    let dia = document.querySelectorAll(".headText2");
    for (let i = 0; i < dia.length; i++) {
        dia[i].addEventListener("mouseover", function () {
            dia[i].style.color = "tomato";
        })
        dia[i].addEventListener("mouseout", function () {
            dia[i].style.color = "";
        })
        dia[i].addEventListener("dblclick", function () {
            save_path.value = "";
            save_name.value = "";
            var tmpdia = dia[i].parentNode;
            var path = "";
            if (tmpdia.classList.contains("filebag")) {

                while (tmpdia.id != dirpic.id) {
                    path = tmpdia.id+'/'+path;
                    tmpdia = tmpdia.parentNode;
                    console.log(tmpdia);
                    if (tmpdia.id == dirpic.id) {
                        break;
                    }
                }
                save_path.value = path;
            } else {
                save_name.value = tmpdia.id;
                tmpdia = tmpdia.parentNode;
                while (tmpdia.id != dirpic.id) {
                    path = tmpdia.id+'/'+path;
                    tmpdia = tmpdia.parentNode;
                    console.log(tmpdia);
                    if (tmpdia.id == dirpic.id) {
                        break;
                    }
                }
                save_path.value = path;
            }
            console.log(save_path.value);
        })
    }
}
save_button.addEventListener("click", function () {
    cover_layer.style.display = "none";
    save_button.style.display = "none";
    if (save_path.value) {
        let filepath = save_path.value;
        // 文件名
        let filename = save_name.value;
        console.log(filepath+filename)
        const xhr = new XMLHttpRequest();
        // 初始化 设置类型与URL
        xhr.open('POST', netsite+'/writeText?filepath='+filepath+'&filename='+filename);
        // 设置请求头 Content-Type用来设置请求体的类型的
        xhr.setRequestHeader('Content-Type', 'text/plain;charset=utf-8');
        // 发送 设置请求体可以发任何格式，但是要服务端有对应处理
        xhr.send(textAreaText.value);
        // 事件绑定
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4) {
                if (xhr.status >= 200 && xhr.status < 300) {
                    alert(xhr.response);
                }
            }
            return false;
        }
    }
    get_dir();
})
delete_button.addEventListener("click", function () {
    cover_layer.style.display = "none";
    delete_button.style.display = "none";
    if (save_path.value) {
        let filepath = save_path.value;
        // 文件名
        let filename = save_name.value;
        console.log(filepath+filename)
        const xhr = new XMLHttpRequest();
        // 初始化 设置类型与URL
        xhr.open('GET', netsite+'/deleteText?filepath='+filepath+'&filename='+filename);
        // 设置请求头 Content-Type用来设置请求体的类型的
        xhr.setRequestHeader('Content-Type', 'text/plain;charset=utf-8');
        // 发送 设置请求体可以发任何格式，但是要服务端有对应处理
        xhr.send();
        // 事件绑定
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4) {
                if (xhr.status >= 200 && xhr.status < 300) {
                    alert(xhr.response);
                }
            }
            return false;
        }
    }
    get_dir();
})
closs.addEventListener("click", function () {
    cover_layer.style.display = "none";
    save_button.style.display = "none";
    delete_button.style.display = "none";
})
// dir_closs.addEventListener("click",function(){
//     dir.style.display="none";
// })
dir_menu.addEventListener("click", function () {
    console.log("click");
    if (dir_flash.style.display == "none") {
        dir.style.display = "block";
        dir_flash.style.display = "block";
        flexbox.style.display = "block";
        dir_head.style.borderBottom="2px solid black";
        
    } else {
        dir.style.display = "none";
        dir_flash.style.display = "none";
        flexbox.style.display = "none";
        dir_head.style.borderBottom="0";
    }
})
dir_flash.addEventListener("click", function () {
    let data = JSON.parse(localStorage.getItem("dirobj"));
    generateDir(dir, 10 ,data);
    var dia = document.querySelectorAll(".headText");
    console.log(dia.length);
    for (let i = 0; i < dia.length; i++) {
        dia[i].addEventListener("mouseover", function () {
            dia[i].style.backgroundColor = "tomato";
        })
        dia[i].addEventListener("mouseout", function () {
            dia[i].style.backgroundColor = "";
        })
    }
})
showbox.addEventListener("dblclick",function(){
    if (textAreaText.style.display == "block") {
        textAreaText.style.display = "none";
    } else {
        textAreaText.style.display = "block";
    }
})